<template>
  <div style="height: 720px;">
    <div class="header">
      <span style="width: 60px; text-align: right">关键字</span>
      <el-input placeholder="请输入关键字" v-model="req.keyword" style="width: 200px; margin-left: 10px"></el-input>
      <el-button type="text" style="margin-left: 34px" size="small" @click="getDepartmentCmpEmps()">
        搜索
      </el-button>
      <el-button type="text" style="margin-left: 34px" size="small" @click="addVis = true">
        新增
      </el-button>
    </div>
    <el-table style="overflow: auto" height="600px" :data="res.Items" stripe border highlight-current-row>
      <el-table-column type="index" width="50"></el-table-column>
      <!-- <el-table-column prop="CMP_ID" label="ID" width="60px"></el-table-column> -->
      <el-table-column label="公司">
        <template slot-scope="scope">
          【{{ scope.row.CMP_ID }}】{{ scope.row.CMP_Name }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="CMP_ShortName" label="简称" width="230px"></el-table-column> -->
      <el-table-column label="员工" width="120px">
        <template slot-scope="scope">
          {{ scope.row.employees.length }}人
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-for="emp in props.row.employees" :key="emp.EMP_ID" style="font-size: 16px; ">
            <span style="margin:5px 20px 5px 60px;color: red" v-if="emp.EMP_Status != 1">[{{ emp.EMP_StatusDesc
            }}]</span><span style="margin-right: 20px;">{{ emp.USR_Name }}</span><span
              style="color: #888;margin-right: 20px;">{{
                emp.USR_Phone
              }}</span>

            <el-button type="text" icon="el-icon-delete" @click="deleteByEmployeeID(props.row.CMP_ID, emp.EMP_ID)">
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <el-button type="text" @click="deleteByCompanyID(scope.row.CMP_ID)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; height: 40px">
      <el-pagination layout="total,prev,pager,next" style="float: right" background small
        :current-page.sync="req.pageIndex" :total="res.Total" :page-size="req.pageSize" :page-sizes="[10, 15, 20]"
        @size-change="
          (val) => {
            req.pageSize = val
            getDepartmentCmpEmps()
          }
        " @current-change="getDepartmentCmpEmps()"></el-pagination>
    </div>

    <el-dialog :visible.sync="addVis" title="新增" width="600px" :modal-append-to-body="false" top="70px">
      <el-form :model="newCmpEmp" label-width="100px">
        <el-form-item label="公司">
          <el-select style="width: 100%" v-model="newCmpEmp.DCE_CompanyID" filterable remote reserve-keyword
            placeholder="请输入公司进行搜索" :remote-method="getCompanies" :loading="loading" @change="chooseCompany">
            <el-option v-for="item in cmps" :key="item.CMP_ID" :label="item.CMP_Name" :value="item.CMP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工">
          <el-select style="width: 100%" v-model="newCmpEmp.DCE_EmployeeID" filterable placeholder="请选择员工">
            <el-option v-for="item in emps" :key="item.ECV_TargetID" :label="item.USR_Name" :value="item.ECV_TargetID">
              <span style="color: red" v-if="item.EMP_Status != 1">[{{ item.EMP_StatusDesc
              }}]</span>【{{ item.USR_Name }}】{{ item.USR_Phone | encodePhone }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addDepartmentCmpEmp">保存</el-button>
          <el-button type="danger" @click="addVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDepartmentCmpEmps,
  getCompanies,
  getCmpEmployees,
  addDepartmentCmpEmp,
  deleteByCompanyID,
  deleteByEmployeeID
} from '@/api/flowCenter/organiztion/departmentCmpEmpManage'
export default {
  props: ['dpmId'],
  watch: {
    dpmId: function () {
      this.getDepartmentCmpEmps()
    },
  },
  data: function () {
    return {
      newCmpEmp: {
        DCE_DepartmentID: null,
        DCE_CompanyID: null,
        DCE_EmployeeID: null,
      },
      cmps: [],
      emps: [],
      req: {
        dpmId: null,
        pageIndex: 1,
        pageSize: 15,
        keyword: null,
      },
      res: {
        Items: [],
        Total: 0,
      },
      addVis: false,
      loading: false,
    }
  },
  methods: {
    getDepartmentCmpEmps() {
      this.req.dpmId = this.dpmId
      getDepartmentCmpEmps(this.req).then(({ data }) => {
        this.res = data
      })
    },
    getCompanies(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCompanies({
          keyword,
        }).then(({ data }) => {
          this.cmps = data.Items
          this.loading = false
        })
      }
    },
    addDepartmentCmpEmp() {
      if (!this.newCmpEmp.DCE_CompanyID) {
        this.$message('请选择公司')
        return
      }
      this.newCmpEmp.DCE_DepartmentID = this.dpmId
      addDepartmentCmpEmp(this.newCmpEmp).then(() => {
        this.$message('添加成功')
        this.getDepartmentCmpEmps()
        this.addVis = false
      })
    },
    chooseCompany(val) {
      this.emps = []
      this.loading = true
      getCmpEmployees({
        cmpId: val
      }).then(({ data }) => {
        this.emps = data
        this.loading = false
      })
    },
    deleteByCompanyID(cmpId) {
      this.$confirm(`是否删除部门查阅该公司及旗下员工的权限？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteByCompanyID({ cmpId, dpmId: this.dpmId }).then(() => {
          this.$message('已删除')
          this.getDepartmentCmpEmps()
        })
      })
    },
    deleteByEmployeeID(cmpId, empId) {
      this.$confirm(`是否删除部门查阅该员工的权限？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteByEmployeeID({ cmpId, empId, dpmId: this.dpmId }).then(() => {
          this.$message('已删除')
          this.getDepartmentCmpEmps()
        })
      })
    },
  },
  created: function () {
    this.getDepartmentCmpEmps()
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 50px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 5px;
  align-items: center;
}
</style>